<template>

  <div>

    <div class="statistics-top">

      <el-checkbox
        v-model="checked"
        label="按终端价营销额统计"
        size="large"
        @change="boxChange"
      />

      <el-form>
        <el-form-item label="总回款营销额：">
          <span class="price-txt">{{ totalAmount.toFixed(2) }}元</span>
        </el-form-item>
      </el-form>

    </div>

    <table-view :data="tableData">
      <el-table-column
              min-width="100"
        prop="date"
        label="时间周期"
        align="center"
        header-align="center"
      />
      <el-table-column
              min-width="140"
        prop="returnAmount"
        label="回款营销额(元)"
        align="right"
        header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.returnAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
        prop="firstTerminalAmount"
        label="第1终端营销额(元)"
        align="right"
        header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.firstTerminalAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
        prop="secondTerminalAmount"
        label="第2终端营销额(元)"
        align="right"
        header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.secondTerminalAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
        prop="thirdTerminalAmount"
        label="第3终端营销额(元)"
        align="right"
        header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.thirdTerminalAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
        prop="agentTypeAgentAmount"
        label="代理商营销额(元)"
        align="right"
        header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.agentTypeAgentAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
        prop="agentTypeAgentPersonAmount"
        label="兼职营销额(元)"
        align="right"
        header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.agentTypeAgentPersonAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
        prop="agentTypeDirectAmount"
        label="终端直销营销额(元)"
        align="right"
        header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.agentTypeDirectAmount) }}
        </template>
      </el-table-column>

    </table-view>

  </div>

</template>

<script>
import statistics from '@CRM/mixins/statisticsList.js'
import {defineComponent, onBeforeMount, toRefs} from 'vue'

export default defineComponent({
  name: 'Index',
  props: {
    screen: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const { data, getListData } = statistics(props.screen)

    onBeforeMount(() => {
      data.type = 'time'
    })

    return {
      ...toRefs(data),

      getListData,
    }
  },
})
</script>

<style scoped>
</style>
